import { connect } from "react-redux";
import { Component } from "react";
import { Form, Input, Button } from "antd";
import { saveUserInfo } from "redux-store/action/user-action";

import axios from "axios";
import "./login.css";

class Login extends Component {
  state = {
    username: "",
    password: "",
  };

  handleLogin = () => {
    /**
     * 获取到状态值,提交请求获取到登录信息, 存储到 redux 中，跳转到主页显示
     */
    axios.get("/student/login").then((res) => {
      debugger;
      this.props.saveUserInfo({
        ...res.data,
      });
      this.props.history.push("/app/home");
    });
  };

  loginFormDataChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  render() {
    return (
      <div className="login_wrapper">
        <div className="loginForm">
          <div className="welcome">欢迎登陆</div>

          <Form size="large">
            <Form.Item>
              <Input
                name="username"
                onChange={this.loginFormDataChange}
                placeholder="请输入登录名"
              ></Input>
            </Form.Item>
            <Form.Item>
              <Input
                name="password"
                onChange={this.loginFormDataChange}
                placeholder="请输入密码"
                type="password"
              ></Input>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                className="login_btn"
                onClick={this.handleLogin}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

export default connect(() => ({}), {
  saveUserInfo,
})(Login);
